<script setup>
import storeName from "./index";
import userStore from "./user.js";
import good from "./good.js";
import { storeToRefs } from "pinia";
import { computed,ref,reactive,onMounted,watchEffect } from "vue";
import demo from "./demo.vue"
const store = storeName();
const useStore = userStore();
const goodStore = good();
console.log(goodStore,563000);
const { count, name, number,price } = storeToRefs(store); //storeToRefs类似于torefs,作用是解构之后每一个变量还是响应式的
const handleClick = () => {
  //count.value++  //直接改变单个值
  //替换整个state
  //store.$state = { count: 10, name: 'Paimon' }
  //下面两个效果是一样的，都是改变state中的多个值
  // store.$patch({
  //   count: store.count+1,
  //   name: "xiaojie",
  // });
  store.$patch((state) => {
    state.count++;
    state.name = "xiaojie";
    state.number++
  });
};
const threeCount = computed(() => count.value * 3);
store.$subscribe((storeInFo, state) => {
  console.log(storeInFo, state,100000000000);
});
goodStore.$subscribe((storeInFo, state) => {
  console.log(storeInFo, state,20000000000000);
});
store.$onAction(function ({ after, onError }) {
  console.log("actions方法执行之前触发", store.count);
  after((res) => {
    console.log("actions方法执行之后触发", store.count, res);
  });
  after((res) => {
    console.log("actions方法执行之后触发", store.count, res);
  });
  //err是调用actions中的方法发生错误的原因
  onError((err) => {
    console.log("onError11", err);
  });
});
const handleActions=()=>{
  console.log(store.chngeName(),62300);
  
}

const a = ref(1)
const state = reactive({
    age: a
})
console.log(state.age,111);// 1
const b = ref(3);
// 假如将b直接赋值给state.age,因为b是一个ref对象，则会替代之前的ref对象，则现在state.age不管如何变化都变量a没有了关系
state.age = b;
console.log(state.age,22222222); // 3
console.log(a.value,33333333); // 1
// 假如将b.value赋值给state.age,其实b.value就相等于一个值，并不是ref对象，则不会替代之前的ref对象，则state.age变化，之前的变量a也会随之变化
state.age = b.value;
console.log(state.age,44444444); // 3
console.log(a.value,789000000000); // 3
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count'),753210)
const addhandle=(num)=>{
  console.log(num,10000000)
}
const hdgf=(val)=>{
  console.log(val,66666666666)
} 
const hdddffgf=()=>{
  console.log(777777777)
} 
const message=ref(100)
const msg=ref("asd")
const etys=ref([1,2,3])
const objhd=reactive({
   name:"qwre"
})
watchEffect(()=>{
  console.log(etys.value,objhd.name,123000000);
})
setTimeout(()=>{
  etys.value.push(1111)
  objhd.name="dffgg"
  console.log("setTimeout");
},3000)
</script>

<template>
<div v-for="iten in etys">{{iten}}</div>
msg:{{msg}} {{typeof msg}}
<input type="number" v-model.number="msg"  />
<p>Message is: {{ message }}</p>
<input :value="message"
  @input="event => message = event.target.value" />
  <!-- ref和key子组件的根元素不会继承 -->
  <div @click="hdgf('father')">
     <demo ref="demo1236" key="sjhdhfg" shdgf="1230000" @click="hdddffgf" @father="hdgf" />
  </div>

<div @click="hdgf">74123000</div>
<div @click.capture="addhandle(1)">
      111111111111
      <div @click.capture="addhandle(2)">
        222222222222
         <div @mouseleave="addhandle(3)">3333333
          <div @mouseleave="addhandle(4)">444444444</div>
         </div>
      </div>
    </div>
  <!-- optionsAPI -->
  {{store.age}}-store
  <button @click="store.age=100">修改store中的值age1</button>
  <button @click="store.$state={age:600}">修改store中的值age2</button>
  <button @click="store.$patch(state => {state.age = 900})">修改store中的值age3</button>
  <button @click="store.$patch({age:500})">修改store中的值age4</button>
  <button @click="handleActions">store中的方法</button>
  <!-- compozitionAPI -->
  {{goodStore.age}}-goodStore
  <button @click="goodStore.age=100">修改goodStore中的值age1</button>
  <button @click="goodStore.$state={age:600}">修改goodStore中的值age2</button>
  <button @click="goodStore.$patch(state => {state.age = 900})">修改goodStore中的值age3</button>
  <button @click="goodStore.$patch({age:500})">修改goodStore中的值age4</button>
  
  <button @click="handleClick">改变state中的值</button>
  <button @click="store.chngeName(20)">调用actions中的方法</button>
  <button @click="useStore.value++">调用user中的方法</button>
  <button @click="store.$reset()">重置state中的值</button>
  
  
  {{ count }}
  {{ threeCount }}
  {{ name }}
  {{ store.double }}
  {{ store.doubleCountPlusOne }}
  {{ number }}
  {{store.GetCount(5)}}
  {{price}}
  <!-- useStore.value中的值不会缓存 -->
  {{useStore.value}}
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
